<template>
  <div>
    <div class="right_nav">
      <div class="right_nav_item" @click="contactus">
        <i class="iconfont icon-dianhua"></i>
      </div>
      <div class="right_nav_item" v-if="type == 1">
        <i class="iconfont icon-icon"></i>
      </div>
      <div class="right_nav_item" v-else>
        <i class="iconfont icon-icon"></i>
      </div>
      <div class="right_nav_item" v-if="type == 1">
        <i class="iconfont icon-qq"></i>
      </div>
      <div class="right_nav_item" v-else>
        <i class="iconfont icon-qq"></i>
      </div>
      <div id="goTop" class="right_nav_item">
        <i class="iconfont icon-fanhuidingbu"></i>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialog"
      class="dialog"
      width="35%"
      @close="handeclose"
    >
      <div class="contactus_box">
        <div>
          <div class="s_flex s_align_items s_flex_comlou">
            <div class="ewm">
              <img src="../../../public/ewm.png" alt="" />
            </div>
            <div class="right">
              <div class="logo_ico s_flex s_align_items">
                <img src="../../../public/logo2.jpg" />
                <p>佛山市顺德区顺企知识产权保护服务中心</p>
              </div>
              <div>
                <span>地址:</span>
                <span>广东省佛山市顺德区大良街道南方智谷知识产权大夏8楼</span>
              </div>
              <div>
                <span>电话:</span>
                <span>0757-22388580</span>
              </div>
              <div>
                <span>邮箱:</span>
                <span>E-Mail:sdipsc@163.com</span>
              </div>
              <div>
                <span>网址:</span>
                <span>www.shundeip.com</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <div class="mb_nav">
      <div class="mb_nav_box s_flex s_align_items">
        <div class="mb_nav_item" @click="contactus">联系我们</div>
        <!-- <div class="mb_nav_item">拨打电话</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["type"],
  data() {
    return {
      dialog: false,
    };
  },
  methods: {
    contactus() {
      this.dialog = true;
    },
    handeclose() {},
  },
};
</script>

<style lang="less" scoped>
/* right_nav */
.right_nav {
  position: fixed;
  z-index: 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.right_nav .iconfont {
  font-size: 35px;
  color: #8590a6;
}

.right_nav .right_nav_item {
  background-color: #fff;
  border: 1px solid #eee;
  margin-bottom: 15px;
  padding: 5px;
  cursor: pointer;
}
.ewm {
  width: 200px;
  height: 200px;
  border-right: 1px solid #dbdbdd;
  img {
    width: 100%;
  }
}
.logo_ico {
  img {
    width: 40px;
    height: 40px;
  }
}
.right {
  margin-left: 10px;
  div {
    margin-bottom: 8px;
  }
}
.mb_nav {
  display: none;
}
@media (max-width: 750px) {
  .right_nav {
    display: none;
  }
  .right {
    margin-left: 0;
    div {
      margin-bottom: 8px;
      margin-top: 8px;
    }
  }
  .mb_nav {
    width: 100%;
    position: fixed;
    z-index: 5;
    left: 0;
    bottom: 0;
    background-color: #eee;
    height: 60px;
    display: block;
    .mb_nav_box {
      height: 100%;
      .mb_nav_item {
        width: 100%;
        text-align: center;
      }
    }
  }
}
/* right_nav */
</style>